<template>
  <div>
    <van-cell-group style="padding:0 5px">
      <van-field
        type="number"
        size="small"
        clearable
        v-model="phone"
        maxlength="11"
        label="手机号"
        placeholder="请输入电话号码"
        @blur="phoneErrmsg = ''"
        :error-message="phoneErrmsg"
      />
      <van-field
        size="small"
        clearable
        v-model="nickname"
        maxlength="15"
        label="昵称"
        placeholder="请输入昵称"
        @blur="nicknameErrmsg = ''"
        :error-message="nicknameErrmsg"
      />
      <van-field
        size="small"
        clearable
        v-model="passwd"
        type="password"
        label="密码"
        placeholder="请输入密码"
        @blur="passwdErrmsg = ''"
        :error-message="passwdErrmsg"
      />
      <van-field
        size="small"
        clearable
        v-model="secondPasswd"
        type="password"
        label="再次输入密码"
        placeholder="请再次输入密码"
        @blur="secondPasswdErrmsg = ''"
        :error-message="secondPasswdErrmsg"
      />
      <!-- 下拉列表选择性别与支付方式 -->
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="性别"
          :value="gender == 1 ? '男' : gender == 2 ? '女' : '未知'"
          name="1"
        >
          <van-button
            style="width: 50%;"
            @click="
              ;(gender = 1), activeNames.splice(activeNames.indexOf('1'), 1)
            "
            >男</van-button
          >
          <van-button
            style="width: 50%;"
            @click="
              ;(gender = 2), activeNames.splice(activeNames.indexOf('1'), 1)
            "
            >女</van-button
          >
        </van-collapse-item>
      </van-collapse>
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="付款方式"
          :value="payType == 'alipay' ? '支付宝支付' : '微信支付'"
          name="2"
        >
          <van-button
            style="width: 50%;"
            @click="
              ;(payType = 'alipay'),
                activeNames.splice(activeNames.indexOf('2'), 1)
            "
            >支付宝付款</van-button
          >
          <van-button
            style="width: 50%;"
            @click="
              ;(payType = 'wechatpay'),
                activeNames.splice(activeNames.indexOf('2'), 1)
            "
            >微信付款</van-button
          >
        </van-collapse-item>
      </van-collapse>

      <van-cell title="头像">
        <van-uploader v-model="image" :max-count="1" />
      </van-cell>

      <van-field
        size="small"
        v-model="captcha"
        label="验证码"
        maxlength="6"
        clearable
        placeholder="输入验证码"
        @blur="captchaErrmsg = ''"
        :error-message="captchaErrmsg"
      >
      </van-field>
      <div style=" margin: 0 auto; text-align: center;">
        <img
          style="width:200px; height: 100px;"
          @click="oncaptchaClick"
          :src="captchaImg"
          alt="验证码无法显示"
        />
      </div>
    </van-cell-group>

    <div style="bottom:0; width:100%;">
      <div style="padding: 15px;">
        <van-button size="large" round @click="onSubmitClick" type="danger"
          >立即注册</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import {
  Field,
  Cell,
  CellGroup,
  Button,
  Divider,
  Image,
  DropdownMenu,
  DropdownItem,
  Collapse,
  CollapseItem,
  Toast,
  Uploader
} from "vant"
export default {
  components: {
    [Image.name]: Image,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Uploader.name]: Uploader
  },
  data() {
    return {
      gender: 1,
      payType: "alipay",

      phone: "",
      phoneErrmsg: "",
      nickname: "",
      nicknameErrmsg: "",
      passwd: "",
      passwdErrmsg: "",
      secondPasswd: "",
      secondPasswdErrmsg: "",
      captcha: "",
      captchaErrmsg: "",

      captcha_identifer: 1,
      captchaImg: "",
      activeNames: [],
      image: []
    }
  },
  methods: {
    purify_images() {
      return this.image[0].content.replace(/data:image\/[^;]+;base64,/i, "")
    },

    getCaptcha() {
      axios
        .get(API_URL + "captcha", {})
        .then(response => {
          this.captcha_identifer = response.data.identifer
          this.captchaImg = "data:image/jpeg;base64," + response.data.img
        })
        .catch(err => {
          console.error(err)
        })
    },
    oncaptchaClick() {
      this.getCaptcha()
    },
    onSubmitClick() {
      this.phoneErrmsg = this.phone.length != 11 ? "手机号格式错误" : ""
      if (!this.nickname) {
        this.nicknameErrmsg = "请输入昵称"
      } else if (!this.nickname.replace(/[^a-zA-Z0-9\u4E00-\u9FA5@.]/g, "")) {
        this.nicknameErrmsg = "昵称格式错误"
      }
      this.passwdErrmsg = this.passwd ? "" : "请输入密码"
      this.secondPasswdErrmsg =
        this.secondPasswd != this.passwd ? "两次输入密码不一致" : ""
      this.captchaErrmsg = this.captcha ? "" : "验证码输入错误"

      axios
        .post(API_URL + "customer/register", {
          phone: this.phone,
          password: this.passwd,
          nickname: this.nickname,
          gender: this.gender,
          payment_info: this.payType,
          captcha_identifer: this.captcha_identifer,
          captcha_code: this.captcha,
          image: this.purify_images()
        })
        .then(() => {
          Toast.success("注册成功")
          this.$router.push({ name: "login" })
        })
        .catch(err => {
          if (typeof err.response.data.message === "string") {
            if (err.response.data.message.startsWith("Phone")) {
              Toast("手机号已注册，请直接登录")
              this.$router.push({ name: "login" })
            } else if (err.response.data.message == "Wrong captcha code!") {
              Toast.fail("验证码错误")
              this.getCaptcha()
            }
          } else {
            Toast.fail("注册失败，请重试")
          }

          console.error(err)
        })
    }
  },
  mounted: function() {
    this.getCaptcha()
  }
}
</script>

<style scoped>
.van-cell__value--alone {
  text-align: center;
}
</style>
